<template>
	<div v-if='addons.indexOf(12)>-1' class="merchshopentrance" :style="'padding-top:' + mydata.p_t  + 'rpx; padding-bottom:' + mydata.p_b + 'rpx;'">
		<div class="head" :style="'background:' + mydata.bg_color">
			<vimage  :src="details.merchant.logo"  mode="widthFix"class="merch-thumb" :style="mydata.logo_type == 'square' ? 'border-radius: 12px' : 'border-radius: 50%;'"></vimage>
			<div class="content" v-bind:class="!mydata.shownum ? 'flex_center' : ''">
				<p  class="title" :style="'color:' + mydata.title_color + ';margin: 0px;'"><span class="shop-title">{{details.merchant.name}}</span></p>
				<p class="subtitle" v-if="mydata.shownum" :style="'color:' + mydata.num_color">在售商品{{details?details.count:''}}件</p>
			</div>
			<div class="distance" @click="tostore">
				<div class="enter-icon-btn" style="" v-if="mydata.btn.type == 3">
					<span class="enter-btn-text" :style="'color: ' + mydata.btn.titlecolor1">{{ mydata.btn.title || '进店看看' }}</span>
					<i class="enter-btn-icon" v-bind:class="mydata.btn.icon" :style="'color:' + mydata.btn.icon_color + ';background: rgba(0, 0, 0, 0);margin-left:4px'"></i>
				</div>
				<div v-else class="btn" :style="btnstyle">{{ mydata.btn.title || '进店看看' }}</div>
			</div>
		</div>
	</div>
</template>

<script>
import {mapState, mapMutations} from 'vuex';
export default {
	props: {
		mydata: {
			type: Object,
			default: {}
		}
	},
	computed: {
		btnstyle() {
			if (this.mydata.btn.type == 1) {
				let style =
					'color:' +
					this.mydata.btn.titlecolor1 +
					';background: rgba(0, 0, 0, 0); border: 2rpx solid ' +
					this.mydata.btn.color +
					';border-radius: ' +
					this.mydata.btn.rd  +
					'rpx;';
				return style;
			} else {
				let style =
					'color: ' + this.mydata.btn.titlecolor2 + '; background:' + this.mydata.btn.color + '; border: none; border-radius: ' + this.mydata.btn.rd + 'rpx;';
				return style;
			}
		},
		...mapState({
			details:state=>state.details,
			addons:state=>state.addons
		})
	},
	methods:{
		
		//前往店铺
		tostore() {
			// uni.navigateTo({
			// 	url: '../merchant/merchant?id=' + this.details.merchant_id
			// });
			this.Jumpurl({
				link:'../merchant/merchant?id=' + this.details.merchant_id,
				type:1,
				login_type:1
				
			})
		},
	}
	
};
</script>

<style lang="scss" scoped>
.merchshopentrance {
	width: 100%;
	margin: 0 auto;
	.head {
		display: flex;
		box-sizing: border-box;
		padding: 8px 12px;
		flex-wrap: nowrap;
		background: #fff;
		.merch-thumb {
			width: 48px;
			height: 48px !important;
			border-radius: 6px;
			margin: auto 9px auto 0;
		}
		.content {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			height: 48px;
			margin: auto 0;
			width: 0;
			flex: 1;
			&.flex_center {
				justify-content: center;
			}
			.title {
				font-size: 14px;
				line-height: 20px;
				font-family: PingFang SC;
				font-style: normal;
				font-weight: 600;
				color: #212121;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				display: flex;
				flex-wrap: nowrap;
				.shop-title {
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
				}
			}
			.subtitle {
				font-size: 12px;
				line-height: 17px;
				font-family: PingFang SC;
				font-style: normal;
				font-weight: normal;
				color: #969696;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
		}
		.distance {
			height: 48px;
			flex: 0;
			display: flex;
			flex-direction: column;
			justify-content: center;
			.btn {
				font-family: PingFang SC;
				font-style: normal;
				font-weight: normal;
				color: #ff3c29;
				font-size: 14px;
				padding: 0 11px;
				height: 24px;
				border: 0.5px solid #ff3c29;
				text-align: center;
				display: flex;
				flex-direction: column;
				justify-content: center;
				border-radius: 14px;
				margin: auto 0;
				white-space: nowrap;
			}
			.enter-icon-btn {
				font-size: 14px;
				text-align: right;
				display: flex;
				flex-wrap: nowrap;
				white-space: nowrap;
				margin-left: 4px;
			}
			.enter-btn-text,
			.enter-btn-icon {
				display: flex;

				flex-direction: column;

				justify-content: center;
				font-size: 14px;
				height: 14px;
				line-height: 14px;
				color: #ff3c29;
				margin: auto 0;
			}
		}
	}
}
</style>
